@model Omu.AwesomeDemo.Infra.Dto.AutocompleteDemoInput
@{
    ViewBag.Title = "index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm())
{  
    <div class="big">
        <div class="efield">
            <label for="Person">
                Person:
            </label>
            @Html.AutocompleteFor(o => o.Person, htmlAttributes: new { style = "color:purple;" })
            @Html.Example("try 'a', 'o', 'e' .. etc.")
        </div>
        <div class="efield">
            <label for="Show2">
                Show:
            </label>
            @Html.Autocomplete("Show2", controller: "ShowAutocomplete")
            @Html.ValidationMessage("Show2")
            @Html.Example("type anything")
        </div>
        <fieldset class="cbt">
            <legend>Bound inputs by parentId</legend>
            <div class="efield">
                <label for="Show">
                    Show:
                </label>
                @Html.Autocomplete("Show")
                @Html.ValidationMessageFor(o => o.Show)
            </div>
            @Html.Example("type anything here")
            @Html.EditorFor(o => o.Character)
            @Html.HiddenFor(o => o.CharacterId)
            @Html.Example("try 'a', 'o', 'e' .. etc.")
            <div class="efield">
                <label for="Man">
                    Character two:
                </label>
                @Html.Autocomplete("Character2", controller: "PersonAutocomplete", parentId: "ShowId")
                @Html.ValidationMessageFor(o => o.Character2Id)
            </div>
            @Html.Example("try writing something nonexistent in the list and hit submit")
        </fieldset>
        <div class="efield">
            <label>
                try clicking</label>
            <input type="submit" value="submit" />
        </div>
    </div>
}
<br class="cbt" />
<fieldset>
<legend>sending additional data to the autocomplete</legend>

<div class="efield">
    <label for="Man">
        Country:
    </label>
    @Html.AjaxDropdown("Country")
</div>
<div class="efield">
    <label for="Man">
        Hobbies:
    </label>
    @Html.Lookup("Hobbies", controller: "HobbyLookup", multiselect: true)
</div>
<div class="efield">
    <label for="Man">
        Person data:
    </label>
    @Html.Autocomplete("PersonData", data: new Dictionary<string, string> { { "Country", "Country" }, { "Hobbies", "Hobbies" } })
</div>
@Html.Example("ppl that are from country and don't have any of the hobbies")
</fieldset>
<br class="cbt" />
<br />
<br />
<fieldset style="height: 500px;">
    <legend>you can bind by parentId to anything that has value</legend>
    <p>
        autocomplete bound to AjaxDropdown<br />
        @Html.AjaxDropdown("Show3", controller: "ShowAjaxDropdown")
        @Html.Autocomplete("Character3", controller: "PersonAutocomplete", parentId: "Show3")
    </p>
    <p>
        autocomplete bound to textbox (type 1 or 2 in the textbox after try the automplete)<br />
        @Html.TextBox("ShowN")
        @Html.Autocomplete("Character4", controller: "PersonAutocomplete", parentId: "ShowN")
    </p>
    <p>
        AjaxDropdown bound to autocomplete<br />
        @Html.Autocomplete("ShowA", controller: "ShowAutocomplete")
        @Html.AjaxDropdown("Character5", controller: "PersonAjaxDropdown", parentId: "ShowAId")
        @*here I'm binding to the id hidden input generated by the autocomplete*@
    </p>
    <p>
        AjaxDropdown bound to AjaxDropdown<br />
        @Html.AjaxDropdown("ShowAA", controller: "ShowAjaxDropdown")
        @Html.AjaxDropdown("Character6", controller: "PersonAjaxDropdown", parentId: "ShowAA")
    </p>
</fieldset>
